<template>
  <div class="detailPage pd-20 mg-10">
    <div class="backBtn">
      <Back width="18px" hight="18px" />
      <ElButton class="btn" @click="handleBack()">返回</ElButton>
    </div>
    <ElTabs v-model="activeName" class="detail-form">
      <ElTabPane label="新增警情" name="first">
        <ElForm
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
        >
          <ElRow style="width: 50%">
            <ElCol :span="24">
              <ElFormItem label="所属组织" prop="organizationId">
                <ElTreeSelect
                  v-model="ruleForm.organizationId"
                  :data="treeData"
                  :props="defaultProps"
                  node-key="id"
                  :render-after-expand="false"
                  check-strictly
                  placeholder="请选择所属组织"
                />
              </ElFormItem>
            </ElCol>
            <ElCol :span="24">
              <ElFormItem label="警情名称" prop="policeWarningName">
                <ElInput
                  v-model="ruleForm.policeWarningName"
                  placeholder="请输入警情名称"
                />
              </ElFormItem>
            </ElCol>
            <ElCol :span="24">
              <ElFormItem label="警情简介" prop="policeWarningIntroduce">
                <ElInput
                  type="textarea"
                  v-model="ruleForm.policeWarningIntroduce"
                  placeholder="请输入警情简介"
                />
              </ElFormItem>
            </ElCol>
            <ElCol :span="24">
              <ElFormItem label="警情位置" prop="mapConfig">
                <div style="color: #1989fa">
                  <h5>
                    {{ ruleForm.address }}
                    <span style="margin-left: 10px">{{ruleForm.longitude}}，{{ruleForm.latitude}}</span>
                  </h5>
                  <h5></h5>
                </div>
                <mapPosition
                  :showSearch="showSearch"
                  :data="mapConfig"
                  @getPosition="getPosition"
                />
              </ElFormItem>
            </ElCol>
            <ElCol :span="24">
              <ElFormItem label="任务下发" prop="issued">
                <div style="width: 100%">
                  <ElButton
                    :class="ruleForm.issuedBtn == '1' ? 'blue-btn' : ''"
                    @click="issuedClick('1')"
                    >机场</ElButton
                  >
                  <ElButton
                    :class="ruleForm.issuedBtn == '2' ? 'blue-btn' : ''"
                    @click="issuedClick('2')"
                    >飞手</ElButton
                  >
                  <div
                    v-if="ruleForm.issued"
                    class="grey-text"
                    style="margin-top: 10px"
                  >
                    <span>{{ ruleForm.issued }}</span>
                    <ElButton link @click="airportClick(ruleForm.issuedBtn)">{{
                      ruleForm.issuedBtn == '1' ? '更改机场' : '更改飞手'
                    }}</ElButton>
                  </div>
                  <div v-else>
                    <ElButton
                      style="width: 100%; margin-top: 10px"
                      class="bluebg-btn"
                      @click="airportClick('1')"
                      v-if="ruleForm.issuedBtn == '1'"
                      ><Plus class="size-5" />选择机场</ElButton
                    >
                    <ElButton
                      v-if="ruleForm.issuedBtn == '2'"
                      style="width: 100%; margin-top: 10px"
                      class="bluebg-btn"
                      @click="airportClick('2')"
                      ><Plus class="size-5" />选择飞手</ElButton
                    >
                  </div>
                </div>
              </ElFormItem>
            </ElCol>
            <ElCol :span="24">
              <ElFormItem label="重要等级" prop="level">
                <el-radio-group v-model="ruleForm.level" class="ml-4">
                  <el-radio value="0" size="large">一般</el-radio>
                  <el-radio value="1" size="large">重要</el-radio>
                </el-radio-group>
              </ElFormItem>
            </ElCol>
          </ElRow>
        </ElForm>
        <div class="footer">
          <ElButton @click="resetForm(ruleFormRef)">取消</ElButton>
          <ElButton type="primary" @click="submitForm(ruleFormRef)">
            确定
          </ElButton>
        </div>
      </ElTabPane>
    </ElTabs>
    <airport ref="airportDialog" @airportRow="getAirport"></airport>
    <flyhand ref="flyhandDialog" @flyhandRow="getflyhand"></flyhand>
  </div>
</template>
<script lang="ts" setup>
import {
  ElButton,
  ElTabs,
  ElTabPane,
  ElRow,
  ElCol,
  ElMessageBox,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElRadioGroup,
  ElRadio,
  ElMessage,
  ElSelect,
  ElOption,
  ElTreeSelect,
  ElSwitch,
  ElTimePicker,
} from 'element-plus';
import { reactive, ref, onMounted } from 'vue';
import { router } from '#/router';
import { useRoute } from 'vue-router';
import airport from './airport.vue';
import flyhand from './flyhand.vue';
import mapPosition from './map.vue';
import { addPoliceWarnings } from '#/api/task/policeTask';
import { getOrganizationsByUserId } from '#/api/sys/organization';

const activeName = ref('first');
const route = useRoute();
const showSearch = ref(true);
const ruleFormRef = ref();
const ruleForm = reactive<RuleForm>({
  id: '',
  organizationId: '',
  policeWarningName: '',
  policeWarningIntroduce: '',
  address: '--',
  longitude: '--',
  latitude: '--',
  level: 1,
  policeWarningType: 1,
  droneId: '',
  // flyhandId:'',
  //
  issued: '',
  issuedBtn: '1',
});
const rules = reactive({
  policeWarningName: [
    { required: true, message: '请输入名称', trigger: 'blur' },
  ],
  organizationId: [
    { required: true, message: '请选择所属组织', trigger: 'change' },
  ],
  // mapConfig: [{ required: true, message: '请选择警情位置', trigger: 'change' }],
  issued: [{ required: true, message: '请选择任务下发', trigger: 'change' }],
  level: [{ required: true, message: '请选择重要等级', trigger: 'change' }],
});
const mapConfig = reactive({
  defaultAddress: '',
  defaultPoint: [],
});
const treeData = ref([]);
const defaultProps = {
  children: 'children',
  label: 'organizationName',
};
const airlineDialog = ref();
const airportDialog = ref();
const flyhandDialog = ref();
const handleBack = () => {
  router.go(-1);
};
const airportClick = (item) => {
  if (item == '1') {
    airportDialog.value.addDialog();
  } else {
    flyhandDialog.value.addDialog();
  }
};

const airportName = ref('');
const flyhandName = ref('');
const issuedClick = (item) => {
  ruleForm.issuedBtn = item;
  ruleForm.policeWarningType = item;
  if (ruleForm.issuedBtn == '1') {
    ruleForm.issued = airportName.value;
  } else {
    ruleForm.issued = flyhandName.value;
  }
};
const getAirport = (item) => {
  ruleForm.issued = item.airportName;
  ruleForm.droneId = item.id;
  airportName.value = item.airportName;
};
const getflyhand = (item) => {
  ruleForm.issued = item.name;
  flyhandName.value = item.name;
  ruleForm.flyhandId = item.id;
};
const resetForm = (formEl) => {
  if (!formEl) return;
  ruleFormRef.value.resetFields();
};

const getPosition = (infoObj) => {
console.log(infoObj, 'getPosition');
  if (infoObj.defaultAddress) {
    ruleForm.address = infoObj.defaultAddress;
    ruleForm.longitude = infoObj.defaultPoint[0];
    ruleForm.latitude = infoObj.defaultPoint[1];
  }
};

const submitForm = async () => {
  try {
    await ruleFormRef.value?.validate();
    const params = {
      organizationId: ruleForm.organizationId,
      policeWarningName: ruleForm.policeWarningName,
      policeWarningIntroduce: ruleForm.policeWarningIntroduce,
      address: ruleForm.address,
      longitude: ruleForm.longitude,
      latitude: ruleForm.latitude,
      level: ruleForm.level,
      policeWarningType: ruleForm.policeWarningType,
      droneId: ruleForm.droneId,
      // flyhandId: ruleForm.flyhandId,
    };
    const { code, message = '添加失败' } = await addPoliceWarnings(params);
    if (code !== 200) throw new Error(message);
    ElMessage.success('添加成功');
    handleBack();
  } catch (err) {
    const errMsg = err.response?.data?.message || err.message;
    ElMessage.error(`操作失败: ${errMsg}`);
  }
};
const getTableData = async () => {
  const { data } = await getOrganizationsByUserId();
  treeData.value = data;
};

onMounted(() => {
  getTableData();
});
</script>
<style scoped>
img {
  width: 100%;
  height: 100px;
  margin-top: 10px;
  margin-right: 20px;
}

.displayflex {
  display: flex;

  span {
    margin-right: 20px;
  }
}
</style>
